<template>
  <BgVue>
    <template #imgFixed>
      <img src="@/assets/imgV2/destroy-bg-bottom.jpg" />
    </template>
    <template #img>
      <img src="@/assets/imgV2/destroy-bg.png" />
    </template>
    <div class="destroy-page">
      <div class="tit">
        <span class="l">PT</span>
        <span class="r">{{ t('home.DWP') }}</span>
      </div>

      <div class="top">
        <span class="name">{{ t('home.DHDZ') }}</span>
        <span class="value">{{ max }}</span>
      </div>
      <div class="item">
        <div class="t">{{ t('home.KY') }}：{{ gm }}</div>
        <div class="ipt">
          <div class="ipt-wrap">
            <van-field v-model="valueAt" type="number" :border="false" />
            <!-- <input type="number" v-model="valueAt" /> -->
          </div>
          <div class="r-btn">
            <button @click="handleClickMax">{{ t('home.max') }}</button>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="t">{{ t('home.KY') }}：{{ gm }}</div>
        <div class="ipt">
          <div class="ipt-wrap">
            <van-field v-model="valueAt" type="number" :border="false" />
            <!-- <input type="number" v-model="valueAt" /> -->
          </div>
        </div>
      </div>
      <div class="btn">
        <button @click="submit">{{ t('home.XHWk') }}</button>
      </div>
      <div class="bottom-btn">
        <router-link to="/staticRecord">{{ t('home.Record') }}</router-link>
      </div>
    </div>
  </BgVue>
</template>
<script>
import http from '../http'

import BgVue from '@/components/BgVue.vue'
import removeZeros from '@/utils/remove-zeros'
export default {
  data() {
    return {
      max: 0,
      gm: 0,
      at: 0,
      valueGm: 0,
      valueAt: 0,
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      const res = await http.get('/api/mining/info')
      if (res.code === 200) {
        this.max = res.data.max
        this.gm = removeZeros(res.data.gm)
        this.at = removeZeros(res.data.at)
      }
    },
    handleClickMax: function () {
      // this.valueGm = this.max;
      this.valueAt = this.max
    },
    async submit() {
      if (this.valueAt > 0) {
        const res = await http.post(`/api/mining/submit?amount=${this.valueAt}`)
        if (res.code === 200) {
          this.valueAt = 0
          Toast(this.t('home.TJCG'))
          this.init()
        }
      }
    },
  },
  components: { BgVue },
}
</script>
<style lang="less" scoped>
.destroy-page {
  padding-top: 98px;
  .tit {
    display: flex;
    height: 25px;
    // justify-content: space-between;
    padding: 0 90px;
    color: #006eed;
    font-size: 19px;
    font-weight: bold;
    .l {
      padding-left: 18px;
    }
    .r {
      padding-left: 64px;
    }
  }
  .top {
    display: flex;
    justify-content: space-between;
    height: 72px;
    padding: 50px 50px 0;
    .name {
      color: #ffffff;
      font-size: 17px;
    }
    .value {
      color: #ffffff;
      font-size: 17px;
      opacity: 0.8;
    }
  }

  .item {
    padding: 18px 50px 0;
    .t {
      height: 24px;
      color: #053071;
      font-size: 18px;
      text-align: right;
      opacity: 0.8;
    }

    .ipt {
      display: flex;
      height: 45px;
      padding: 18px 0px 0;
    }
    .van-cell {
      padding: 0;
      background: transparent;
    }
    :deep(input) {
      width: 100%;
      height: 27px;
      padding: 0 10px;
      color: #053071;
      font-size: 18px;
      background-color: transparent;
      border: none;
    }
    .ipt-wrap {
      flex: 1;
    }

    .r-btn {
      padding-right: 6px;
    }

    .r-btn button {
      display: block;
      height: 27px;
      padding: 0 10px;
      padding: 2px 10px;
      color: #fff;
      font-size: 16px;
      // background: #e0b755;

      background-image: linear-gradient(0deg, #e69118 0%, #f5cf1c 100%);
      border-radius: 6px;

      border: none;
    }
    & + .item {
      margin-top: 8px;
    }
  }

  .btn {
    padding: 25px 0 0;
    button {
      display: block;
      width: 260px;
      height: 44px;
      margin: 0 auto;
      color: #ffffff;
      font-size: 20px;
      font-weight: bold;
      text-shadow: #d8540d 1px 0 0, #d8540d 0 1px 0, #d8540d -1px 0 0,
        #d8540d 0 -1px 0;
    }
  }
  .bottom-btn {
    padding: 15px 0 114px;

    font-size: 18px;

    text-align: center;
    a {
      text-decoration: underline;
      color: #3268c8;
    }
  }
}
</style>
